<template>
  <div style="width: 100%">
    <!-- 首页 -->
    <div style="height: 50px; background-color: rgb(245, 247, 249);overflow:hidden;">
      <Button
        style="
          margin: 6px;
          color: rgb(137, 145, 240);
          border: none;
          margin-left:20px;
        "
        v-for="(btn, i) in $store.state.routerMenus"
        :key="'routerBtn' + i"
        @click="to(btn.path)"
        >{{ btn.name }}
        <icon type="ios-close" v-if="btn.close" @click.stop="closeBtn(i)" size="20"></icon>
      </Button>

      <Dropdown style="position: absolute; right: 30px">
        <a href="javascript:void(0)">
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
          <DropdownMenu>
            <DropdownItem>关闭左侧</DropdownItem>
            <DropdownItem>关闭右侧</DropdownItem>
            <DropdownItem>关闭全部</DropdownItem>
            <DropdownItem>全部关闭</DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
    </div>
    <!-- 面包屑 -->
    <div style="padding: 30px" >
      <div style="font-size: 22px; color: black; margin-top: 10px" v-for=" (idx,i) in $store.state.routerMenus" :key="'idx' + i">
          <!-- {{ idx[idx.length].name }} -->
      </div> 
    </div>

    <router-view></router-view>
    <Buttoms></Buttoms>
  </div>
</template>
<script>
// import { list } from "../../Api/admin";
import Buttoms from "../../components/Buttoms.vue";
// import Ipload from "../../components/Upload.vue"
export default {
  components: { Buttoms },
  methods:{
    closeBtn(i){
      console.log(i);
        this.$store.commit("deleteRouterMenuItem",i)
      
    },
    to(path,i){
      console.log(path);
      console.log(this.$store.state.routerMenus);
      i;
        this.$router.push(path)
    }
  }
};
</script>
<style>
.but button {
  border: none;
  margin-left: 10px;
}
.but1 button {
  margin-left: 10px;
  color: rgb(74, 138, 233);
  border: rgb(74, 138, 233) 1px solid;
}
.ul3 li {
  padding-left: 40px;
  display: inline;
}
</style>